<template>
  <div class="box">
    <aside class="animate__animated animate__bounceInLeft sidebar">
      <div class="avatar">
        <img src="https://img.bosszhipin.com/beijin/mcs/useravatar/20181126/18102d668165941fb4aef4d29e4413370f8e43da5009dbdb4b4cf052f87ab1b8_s.jpg" title="多米">
      </div>
      <nav class="nav">
        <a v-for="intro in introduceList" @click="showSection(intro.name)" :key="intro.id"><i :class="intro.icon" style="margin-right: 10px"></i> {{intro.title}}</a>
      </nav>
    </aside>
    <main>
      <section class="animate__animated animate__fadeInRight" v-if="showSectionId === '#info'" id="info">
        <div class="wrap">
          <h2 class="title"><i class="mintui mintui-gerenzhongxin"></i> 个人资料</h2>
          <el-row :gutter="20" class="row">
            <el-col :sm="8" :xs="24" class="col-l-4">
              <p><i class="mintui mintui-name" style="margin-right: 5px"></i>姓名：沈健</p>
              <p><i class="mintui mintui-sex" style="margin-right: 5px"></i>性别：男</p>
              <p><i class="mintui mintui-nianling" style="margin-right: 5px"></i>年龄：26</p>
              <p><i class="mintui mintui-zhuanyemingcheng" style="margin-right: 5px"></i>学历：本科</p>
              <p><i class="mintui mintui-gongzhonghao" style="margin-right: 5px"></i>公众号：<a href="https://mp.weixin.qq.com/s?__biz=MzIzNzc0MjA5NA==&mid=2247483996&idx=1&sn=22a7ebd62cb8e291bcc7e01130d95e6d&chksm=e8c2b33ddfb53a2beb2dfde3d22e79571b618b5abab29e4bd76ba0446cde6bab0ff87feda0d4&scene=178&cur_album_id=2408100201250193409#rd">算法小生</a></p>
              <p><i class="mintui mintui-weixin" style="margin-right: 5px"></i>微信号：haotu369</p>
            </el-col>
            <el-col :sm="16" :xs="24" class="col-l-4">
              <p><i class="mintui mintui-chushengriqi" style="margin-right: 5px"></i>出生日期：1996-02</p>
              <p><i class="mintui mintui-xuexiao" style="margin-right: 5px"></i>学校：华北水利水电大学</p>
              <p><i class="mintui mintui-zhuanyemingcheng" style="margin-right: 5px"></i>专业：软件工程</p>
              <p><i class="mintui mintui-yingyu1" style="margin-right: 5px"></i>英语水平：六级</p>
              <p><i class="mintui mintui-email" style="margin-right: 5px"></i>邮箱：<a href="mailto:1515345281@qq.com">1515345281@qq.com</a></p>
            </el-col>
          </el-row>
        </div>
      </section>
      <section class="animate__animated animate__fadeInRight" v-show="showSectionId === '#skills'" id="skills">
        <div class="wrap">
          <h2 class="title"><i class="mintui mintui-jinengbiaoqian"></i>掌握的技能</h2>
          <el-row :gutter="40" class="row scrollable">
            <el-col :sm="8" :xs="24" class="center-fixed">
              <div class="skills-icon">
                <i class="mintui mintui-shujujiegou-01"></i>
              </div>
              <div class="skills-title">
                <h3>JAVA</h3>
                <p>熟练掌握集合、多线程、JVM,熟悉SpringCloud、Mybatis、JPA框架，熟悉算法与数据结构，leetcode300+</p>
              </div>
            </el-col>
            <el-col :sm="8" :xs="24" class="center-fixed">
              <div class="skills-icon">
                <i class="mintui mintui-python"></i>
              </div>
              <div class="skills-title">
                <h3>Python</h3>
                <p>熟练掌握python基础、pandas,熟悉scrapy、pyspider爬虫框架，爬虫经验较为丰富</p>
              </div>
            </el-col>
            <el-col :sm="8" :xs="24" class="center-fixed">
              <div class="skills-icon">
                <i class="mintui mintui-dashuju"></i>
              </div>
              <div class="skills-title">
                <h3>大数据</h3>
                <p>熟悉elasticsearch、mongodb、clickhouse、mysql、oracle、redis、spark常用技术并有集群搭建维护经验</p>
              </div>
            </el-col>
            <el-col :sm="8" :xs="24" class="center-fixed">
              <div class="skills-icon">
                <i class="mintui mintui-vuejs"></i>
              </div>
              <div class="skills-title">
                <h3>Vue</h3>
                <p>熟练掌握Vue、ElementPlus，有从0到1负责完整项目研发经验</p>
              </div>
            </el-col>
            <el-col :sm="8" :xs="24" class="center-fixed">
              <div class="skills-icon">
                <i class="mintui mintui-MQ"></i>
              </div>
              <div class="skills-title">
                <h3>MQ</h3>
                <p>熟悉常用mq，如rabbitMQ、kafka,掌握其原理</p>
              </div>
            </el-col>
            <el-col :sm="8" :xs="24" class="center-fixed">
              <div class="skills-icon">
                <i class="mintui mintui-yunwei"></i>
              </div>
              <div class="skills-title">
                <h3>运维</h3>
                <p>熟悉linux基础知识、jenkins持续发布、docker及k8s部署、airflow任务调度</p>
              </div>
            </el-col>
          </el-row>
        </div>
      </section>
      <section class="animate__animated animate__fadeInRight" v-show="showSectionId === '#works'" id="works">
        <div class="wrap">
          <h2 class="title"><i class="mintui mintui-zuopin"></i>个人作品</h2>
          <el-row :gutter="30">
            <el-col :xs="24" :sm="12" :lg="8" v-for="work in workList" :key="work.id">
              <div class="works-item">
                <el-card class="works-item-front">
                  <el-image :src="work.pic_url"/>
                  <p>{{work.name}}</p>
                </el-card>
                <el-card class="works-item-back">
                  <p>{{work.desp}}</p>
                </el-card>
              </div>
            </el-col>
          </el-row>
        </div>
      </section>
      <section class="animate__animated animate__fadeInRight" v-show="showSectionId === '#hobbys'" id="hobbys">
          <h2 class="title"><i class="mintui mintui-xingquaihao"></i>我的爱好</h2>
          <div class="row">
            <el-carousel :interval="2000" :type="cardOpen? 'card':''" height="350px">
              <el-carousel-item v-for="hobby in hobbyList" :key="hobby.id">
                <el-card class="hobby">
                  <el-image style="width: 100%" :src="hobby.pic_url"></el-image>
                  <h3 class="tit">{{hobby.name}}</h3>
                  <p>{{hobby.desp}}</p>
                </el-card>
              </el-carousel-item>
            </el-carousel>
        </div>
      </section>
      <section class="animate__animated animate__fadeInRight" v-show="showSectionId === '#summary'" id="summary">
        <div class="wrap">
          <h2 class="title"><i class="mintui mintui-ziwopingjia"></i>自我评价</h2>
          <div class="row">
            <ul>
              <li>一个对新事物保持好奇心的人，如区块链、元宇宙、web3</li>
              <li>一个对武术、国学略有研究的人，如单杠360旋转、空翻、易经</li>
              <li>一个对过程追求与享受、结果听天意的人</li>
            </ul>
          </div>
        </div>
      </section>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      screenWidth: document.documentElement.clientWidth,  //实时屏幕宽度,
      showSectionId: '#info',
      introduceList: [
        {
          id: 0,
          title: '资料',
          name: '#info',
          icon:'mintui mintui-zhuanyemingcheng'
        },
        {
          id: 1,
          title: '技能',
          name: '#skills',
          icon:'mintui mintui-jinengbiaoqian'
        },
        {
          id: 2,
          title: '作品',
          name: '#works',
          icon:'mintui mintui-zuopin1'
        },
        {
          id: 3,
          title: '爱好',
          name: '#hobbys',
          icon:'mintui mintui-xingquaihao'
        },
        {
          id: 4,
          title: '评价',
          name: '#summary',
          icon:'mintui mintui-ziwopingjia'
        },
      ],
      workList:[
        // {
        //   id:0,
        //   name:'个人博客',
        //   desp:'一个简单的个人博客项目，分为前台展示和后台管理系统，前台展示部分实现了博客的浏览，查找，分类，标签，评论，留言等功能，后台管理系统实现了博客发表，博客管理，用户管理等功能。',
        //   pic_url:'http://hikari.top/images/343142d0-8c6d-4749-989c-fca4f2019185.jpg'
        // }
      ],
      hobbyList:[
        {
          id: 0,
          name:'旅游',
          pic_url:'https://tse1-mm.cn.bing.net/th/id/R-C.b384d05d463f4ec8eb0f05413061bc9b?rik=OGwlKMdfs%2b9ckA&riu=http%3a%2f%2fwww.deskcar.com%2fdesktop%2ffengjing%2f2014325205628%2f5.jpg&ehk=8iXIvRS%2fc9UX%2bHwYWJ19i330ZzVOuj8mcAQxM4aey4s%3d&risl=&pid=ImgRaw&r=0',
          desp:'疫情使得旅游已经成为奢侈品，愿早日结束。已打卡地: 泰山、嵩山少林寺三皇寨、西安大雁塔回民街、开封包公府、上海魔都东方明珠、北京天安门、 苏州山塘街、 湖南张家界天门山、水浒好汉城'
        },
        {
          id: 1,
          name:'学习',
          pic_url:'https://bpic.588ku.com/back_origin_min_pic/19/07/03/743d727f1c2e310ad6242bb5f70bad7c.jpg!/fw/750/quality/99/unsharp/true/compress/true',
          desp:'每月读点书、每周刷点算法题'
        },
        {
          id: 2,
          name:'追剧',
          pic_url:'https://pic3.zhimg.com/v2-9355382d02328f73f68f9524cc522840_r.jpg?source=172ae18b',
          desp:'爱追国产动漫，斗罗大陆、斗破苍穹、吞噬星空、星辰变等'
        },
        {
          id: 3,
          name:'骑车',
          pic_url:'https://tse1-mm.cn.bing.net/th/id/R-C.bbe71e634a6676380ae822820fc504bd?rik=as9LZFJerktC6A&riu=http%3a%2f%2fbpic.588ku.com%2fback_pic%2f03%2f86%2f74%2f3657cfd2b24dac1.jpg!%2ffh%2f300%2fquality%2f90%2funsharp%2ftrue%2fcompress%2ftrue&ehk=hycT%2fo66LHlP6pSyN87wLYWs%2fO4gm6bE1kLmO8afEpQ%3d&risl=&pid=ImgRaw&r=0',
          desp:'大学期间最疯狂一次，从学校骑行到黄河边炎黄二帝处来回90公里，骑行8小时，经历了夜晚、土路、迷路、二人手机仅仅2%电量的绝望，幸好最后的大路是熟悉的'
        }
      ],
    }
  },
  computed:{
    cardOpen(){
      return this.screenWidth >= 748;
    }
  },
  created() {
    window.addEventListener('resize', this.screenAdapter)
  },
  methods: {
    showSection(name) {
      this.showSectionId = name
    },
    // 屏幕尺寸变化的监听函数
    screenAdapter(){
      this.screenWidth = document.documentElement.clientWidth;
    }
  }
}
</script>

<style scoped lang="less">
  body {
    height: 100vh;
    overflow: hidden;
  }

  .box {
    width: 100%;
    height: 100vh;
    position: relative;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    color: #fff;
    width: 250px;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    background: rgba(75, 75, 75, 0.9);

    nav {
      margin: 0;
      display: flex;
      list-style: none;
      flex-direction: column;

      a {
        font: 16px/1.5 'Microsoft Yahei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
        list-style: none;
        box-sizing: border-box;
        text-decoration: none;
        color: #fff;
        padding: 1em;
        display: block;
        text-align: center;
        transition: background .3s, box-shadow .3s;
      }

      a:hover {
        background: rgba(60, 60, 60, 1);
      }
    }

    .avatar {
      width: 140px;
      height: 140px;
      margin: 1em auto;
      margin-top: 5em;
      background: #fff;
      border-radius: 100%;
      border: #fff 5px solid;
      transition: transform 0.5s;

      img {
        width: 100%;
        border-radius: 50%;
        /*transition: .6s;*/
      }

      img:hover {
        transform: rotate(360deg);
        transition: all 1.5s;
      }
    }
  }

  main {
    color: #353535;
    font: 16px/1.5 'Microsoft Yahei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
    box-sizing: border-box;
    margin-left: 250px;

    section {
      top: 50%;
      transform: translateY(-50%);
      position: relative;
      background-color: rgba(255, 255, 255, 0.8);
      border: 3px dashed rgba(0, 0, 0, 0.3);
      border-radius: 20px;
      padding: 20px;
      .title{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        i{
          font-size: larger;
          margin-right: 10px;
        }
      }
      a{
        text-decoration: none;
      }
    }

    section:before {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      border-right: 20px solid rgba(0, 0, 0, 0.3);
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
      top: 50%;
      transform: translateY(-50%);
      left: -20px;
    }

    #info {
      .warp {
        .row {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }

    #skills {
      .center-fixed {
        text-align: center;
        display: flex;
        flex-direction: column;

        .skills-icon {
          width: 100px;
          height: 100px;
          margin: 0 auto;
          background: #fff;
          border-radius: 100%;
          box-shadow: 0 5px rgba(0, 0, 0, 0.3);

          i {
            font-size: 50px;
            line-height: 100px;
            transition: all 1s;
          }

          .fa-html5 {
            content: "\f13b";
          }
        }

        .skills-icon:hover {
          i {
            transform: rotate(180deg);
            transition: all 1s;
          }
        }

      }

    }
    #works{
      .el-card /deep/ .el-card__body{
        padding: 0;
      }

      .works-item{
        margin-bottom: 20px;
        position: relative;
        .works-item-front,.works-item-back{
          background-color: white;
          text-align: center;
          border-radius: 5px;
          box-shadow: 0 0 5px 0 #ccc;
          border: 1px solid #5d5d5d;
          transition: all 1s;
          backface-visibility: hidden;
          width: 100%;
          height: 100%;
        }
        .works-item-front{
          .el-image{
            max-width: 100%;
            max-height: 180px;
            border-radius: 5px 5px 0 0;
          }
          p{
            margin-top: 2px;
            margin-bottom: 2px;
            color: #303133;
          }
        }
        .works-item-back{
          box-sizing: border-box;
          padding: 20px;
          position: absolute;
          top: 0;
          background: rgba(255, 255, 255, 0.8);
          transform: rotateY(180deg);
        }
      }
      .works-item:hover {
       .works-item-back{
          transform: rotateY(0deg);
        }
        .works-item-front{
          transform: rotateY(180deg);
        }
      }
    }

    #hobbys{
      .el-card /deep/ .el-card__body{
        padding: 0;
        height: 350px;
      }
      .hobby{
        opacity: 0.9;
        background-color: rgba(255,255,255,0.9);
        box-shadow: none;
        margin-bottom: 20px;
        border-radius: 20px;
        .el-image{
          width: 100%;
          max-height: 200px;
        }
        .tit{
          margin: 0 auto;
          line-height: 20px;
          text-align: center;
        }
        p{
          margin: 0;
          padding: 20px;
          font-size: medium;
        }
      }
    }
    #summary{
      ul{
        li{
          line-height: 50px;
          border-bottom: 2px dashed #63a35c;
          background-color: rgba(0,0,0,0.1);
          margin-bottom: 20px;
          border-radius: 9999px;
          list-style-type: circle;
        }
      }
    }
  }


  @media screen and (max-width: 768px){
    .sidebar{
      position: relative;
      top: 0;
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: column;
      .avatar{
        margin: 1rem auto;
        width: 100px;
        height: 100px;
      }
      nav{
        background-color: rgba(255,255,255,0.1);
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
      }
    }
    main{
      margin: 0 auto;
      width: 100%;
      text-align: center;
      section{
        border-radius: 0;
        border: none;
      }
      #summary{
        ul{
          li{
            border-radius: 0;
            border-bottom: none;
            background-color: transparent;
            text-align: left;
          }
        }
      }
    }
  }

</style>
